<template>

  <div>
    <el-card class="box-card">
      <el-form ref="truckdirverform" :model="searchCriteria" label-width="80px" :inline="true">

        <el-form-item label="司机名称:" prop="truckDriver">
          <el-input type="text" placeholder="请输入司机名称" v-model="searchCriteria.truckDriver"></el-input>
        </el-form-item>
        <el-form-item label="所属车队:" prop="truckFleet">
          <el-select v-model="searchCriteria.truckFleet" clearable placeholder="请选择">
            <el-option
              v-for="item in truckFleet"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageTruckDriver()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="reset('truckdirverform')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-divider></el-divider>

    <el-card class="box-card">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            <!--            queryVo.pageNum 当前页
                        queryVo.pageSize 页大小-->
            {{ scop.$index + (pagenum - 1) * pagesize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="driverId" label="司机编号">

        </el-table-column>
        <el-table-column prop="driverName" label="司机名称">

        </el-table-column>
        <el-table-column prop="phone" label="司机电话">

        </el-table-column>
        <el-table-column prop="orgName" label="所属机构">

        </el-table-column>
        <el-table-column prop="fleetName" label="所属车队" width="150">

        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="findxiangqing(scope.row)">查看详情</el-button>
            <el-button type="text" size="medium" @click="openupdfleet(scope.row)">编辑车队</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagesum">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="修改车队"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">
      <div>
        <el-form ref="form" :model="updDriver" label-width="120px">
          <el-form-item label="车型名称">
            <el-input disabled v-model="updDriver.driverId"></el-input>
          </el-form-item>
          <el-form-item label="所属车队:" prop="truckFleet">
            <el-select v-model="updDriver.id" clearable placeholder="请选择">
              <el-option
                v-for="item in truckFleet1"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="danger" @click="updTruckType()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import method from '../../../api/logisticsmanagement/transitcenter/DriverManagement'

export default {

  name: "driverManagement",
  data() {
    return {
      //  当前页
      pagenum: 1,
      //  一页显示几条数据
      pagesize: 5,
      //  总页数
      pagesum: 0,
      //  查询出来的数据
      tableData: [],
      //  搜索条件
      searchCriteria: {
        "truckDriver": null,
        "truckFleet": null
      },
      truckFleet: {},//  所有车队
      truckFleet1: {},//  所有车队
      loading: false,//  添加对话框的显示状态
      dialogVisible1: false, //  编辑车队的对话框状态
      updDriver: {},//  要编辑的车队数据
    }
  },
  methods: {
    //  清除搜索框
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    //  分页查询车辆司机数据
    pageTruckDriver() {
      this.loading = true

      method.pageTruckDriver(this.pagenum, this.pagesize, this.searchCriteria.truckFleet == "" ? null : this.searchCriteria.truckFleet, this.searchCriteria.truckDriver == "" ? null : this.searchCriteria.truckDriver).then(({data}) => {

        if (data.data.code == 200) {
          this.tableData = data.data.data.records
          this.userId = data.data.data.records.userId
          this.pagesum = data.data.data.total
          this.loading = false
        }
      })
    },
    //  查询所有车队数据
    findTruckFleet() {
      method.selTruckFleet().then(({data}) => {
        this.truckFleet = data.data
        this.truckFleet1 = data.data
      })
    },
    //  查看详情
    findxiangqing(val) {
      this.$router.push({path: 'driverDetails', query: {id: val.driverId, userid: val.userId, operate: "driver"}})
    },
    //  打开编辑车队的对话框
    openupdfleet(val) {
      this.updDriver = {

        driverId: val.driverId,
        id: val.fleetId
      }
      this.dialogVisible1 = true
    },
    //  关闭添加车辆类型的对话框
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  修改总页数
    setPage(val) {

      this.pagenum = val
      this.pageTruckDriver()

    },
    //  设置一页显示多少数据
    setSize(val) {

      this.pagesize = val
      this.pageTruckDriver()
    },
    //  确定修改车队
    updTruckType() {

      this.dialogVisible1 = false
      method.updDriverFleet(this.updDriver.driverId, this.updDriver.id).then(({data}) => {

        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '车辆类型添加成功!',
            type: 'success'
          })
          this.pageTruckDriver()
        }

      })
    }
  },
  created() {
    this.findTruckFleet()
    this.pageTruckDriver()
  }
}
</script>
